<template>
  <div>
    <!-- 患者聊天记录 -->
    <el-dialog
      class="dialog-frame"
      title="聊天记录"
      width="800"
      :visible.sync="chatRecordDialog"
      @close="chatRecordDialog = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-table
        class="l-table"
        :data="recordList"
        border
        max-height="480"
        highlight-current-row
      >
        <el-table-column prop="name" label="时间">
          <template slot-scope="scope">
            <span>{{ scope.row.msgDate || "-" }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="角色">
          <template slot-scope="scope">
            <span>{{ scope.row.senderType }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.msgUserName }} </span>
          </template>
        </el-table-column>

        <el-table-column prop="size" label="内容">
          <template slot-scope="scope">
            <viewer v-if="scope.row.msgType === 1">
              <img :src="scope.row.msgText" width="100" title="点击预览" />
            </viewer>
            <span v-else>{{ scope.row.msgText }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 患者聊天记录-视频记录 -->
    <el-dialog
      class="dialog-frame"
      title="视频记录"
      width="800"
      :visible.sync="dialogVideoRecord"
      v-if="dialogVideoRecord"
      @close="dialogVideoRecord = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-for="(v, i) in 4" :key="i">
        <div>2022/04/01</div>
        <video :id="'playerId' + i" class="video-js" controls></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { isUrl } from '@/utils';
import dict from '@/utils/dict';

export default {
  props: {},
  data() {
    return {
      chatRecordDialog: false, // 聊天记录弹框
      patientMsg: {}, // 患者消息列表
      recordPage: {
        // 聊天记录分页
        total: 0,
        current: 1,
        size: 10,
      },
      recordList: [], // 聊天记录列表
      dialogVideoRecord: false,
    };
  },
  mounted() {},
  methods: {
    isUrl,
    open(data) {
      this.chatRecordDialog = true;
      this.getRecordList(data);
    },
    getRecordList() {
      this.$ajax.getConsultationChatRecord({
        roomId: this.$route.query.id,
      }).then((res) => {
        this.recordList = res.data.map(item => ({
          msgUserName: item.sender,
          msgText: item.content,
          msgDate: item.createTime,
          msgType: item.contentType,
          senderType: this.getsenderType(item.senderType),
        }));
        this.scrollContentBottom();
      });
    },
    getsenderType(type) {
      let typeName = '';
      dict.roleIds.forEach((item) => {
        if (item.id === type) {
          typeName = item.name;
        }
      });
      return typeName;
    },
    handleSizeChange(val) {
      this.recordPage.size = val;
      this.getRecordList();
    },
    changeRecordListCurrent(val) {
      // 诊断规范分页
      this.recordPage.current = val;
      this.getRecordList();
    },
    openVideoRecord() {
      this.dialogVideoRecord = true;
    },
  },
};
</script>
